import React, { FC, useEffect, useState } from 'react';
import { connect, ConnectProps, history, DjModelState } from 'umi';
import styles from './dj.less';
import { Row, Col } from 'antd';
import Default from './default/default';
import Selected from './selected/selected';

interface PageProps extends ConnectProps {
  djModel: DjModelState;
  dispatch: any;
}

const Dj: FC<PageProps> = (props: any) => {
  console.log(props);
  let { djModel, location } = props;
  let selectId = location.query.id;

  let getCategories = () => {
    props.dispatch({
      type: 'djModel/getCategories',
    });
  };

  let selectDj = (id: string) => {
    history.push({
      pathname: '/dj',
      query: {
        id: id,
      },
    });
  };

  useEffect(() => {
    getCategories();
  }, []);

  let ShowCategories = () => {
    if (selectId) {
      return <Selected selectId={selectId}></Selected>;
    } else {
      return <Default></Default>;
    }
  };

  return (
    <div className={styles.dj}>
      <div className={styles.categories}>
        {djModel.categories.map((data: any, index: number) => (
          <div className={styles.categoriesItem} key={index}>
            <div
              className={
                selectId == data.id
                  ? styles.itemContentActive
                  : styles.itemContent
              }
              onClick={() => {
                selectDj(data.id);
              }}
            >
              <div
                className={styles.imgWrapper}
                style={{ backgroundImage: 'url(' + data.picWebUrl + ')' }}
              ></div>
              <p className={styles.name}>{data.name}</p>
            </div>
          </div>
        ))}
      </div>

      <ShowCategories></ShowCategories>
    </div>
  );
};

export default connect(({ djModel }: { djModel: DjModelState }) => ({
  djModel,
}))(Dj);
